<template>
	<view class="container">

		<view class="card-info-section">
			<view :class="['card-item', card.type === 'monthly' ? 'monthly-card' : 'daily-card']">
				<view class="card-content">
					<view class="card-info">
						<view class="card-name">{{ card.parkingLot }}</view>
						<view class="price">¥ <text class="price-value">{{ card.price }}</text> / {{ card.type === 'monthly' ? '月' : '天' }}</view>
					</view>
				</view>
				<view class="card-type-badge">{{ card.type === 'monthly' ? '月卡' : '天卡' }}</view>
			</view>
		</view>

		<view class="license-plate-section" v-if="!isRenew">
			<view class="section-title">选择车牌</view>
			<picker @change="bindPickerChange" :value="plateIndex" :range="plateList">
				<view class="picker">
					{{plateList[plateIndex]}}
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</picker>
		</view>

		<view class="duration-section">
			<view class="section-title">选择时长</view>
			<view class="duration-options">
				<view v-for="(option, index) in durationOptions" :key="index" :class="['duration-option', { active: selectedDuration === option.value }]" @click="selectDuration(option.value)">
					{{ option.label }}
				</view>
				<input class="duration-input" type="number" placeholder="自定义" v-model="customDuration" @input="onCustomDurationInput" />
			</view>
		</view>

		<view class="summary-section">
			<view class="summary-item">
				<text>总计</text>
				<text class="total-amount">¥ {{ totalAmount.toFixed(2) }}</text>
			</view>
		</view>

		<view class="rules-section">
			<view class="section-title">注意事项</view>
			<view class="rules-content">
				<p>1. 停车卡仅限绑定车辆在指定停车场使用。</p>
				<p>2. 购买后不支持退款，请确认信息无误。</p>
				<p>3. 月卡和天卡的使用规则请参照停车场公示。</p>
			</view>
		</view>

		<view class="footer-actions">
			<button class="confirm-btn" @click="openPaymentPopup">确认支付</button>
		</view>

		<!-- 支付弹窗 -->
		<uni-popup ref="paymentPopup" type="bottom">
			<view class="payment-popup-content">
				<view class="popup-header">确认支付</view>
				<view class="payment-amount">¥ {{ totalAmount.toFixed(2) }}</view>
				<view class="payment-option" :class="{ 'disabled': isBalanceInsufficient }" @click="handlePayment('balance')">
					<text>余额支付 (剩余 ¥{{ balance.toFixed(2) }})</text>
				<uni-icons type="right" size="16"></uni-icons>
				</view>
				<view class="payment-option" @click="handlePayment('wechat')">
					<text>{{ paymentEnvText }}</text>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
				<view class="cancel-btn" @click="closePaymentPopup">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const card = ref({});
const isRenew = ref(false);
const selectedDuration = ref(1);
const customDuration = ref('');
const balance = ref(100.00); // 模拟用户余额
const paymentPopup = ref(null);
const plateList = ref(['粤B 12345', '粤S 67890', '粤A 54321']); // 模拟已绑定车牌
const plateIndex = ref(0);
const paymentEnvText = ref('微信支付');

const durationOptions = computed(() => {
	return card.value.type === 'monthly'
		? [{ label: '1个月', value: 1 }, { label: '3个月', value: 3 }, { label: '1年', value: 12 }]
		: [{ label: '1天', value: 1 }, { label: '3天', value: 3 }, { label: '7天', value: 7 }];
});

const totalAmount = computed(() => {
	const duration = customDuration.value ? parseInt(customDuration.value) : selectedDuration.value;
	return card.value.price * duration;
});

const isBalanceInsufficient = computed(() => {
  console.log(parseFloat(totalAmount.value) > balance.value)
  return parseFloat(totalAmount.value) > balance.value;
});

onLoad((options) => {
	card.value = JSON.parse(decodeURIComponent(options.card));
	isRenew.value = options.isRenew === 'true';
	selectedDuration.value = durationOptions.value[0].value;
});

onMounted(() => {
    // #ifdef MP-WEIXIN
    paymentEnvText.value = '微信支付';
    // #endif
    // #ifdef MP-ALIPAY
    paymentEnvText.value = '支付宝支付';
    // #endif
});

const selectDuration = (duration) => {
	selectedDuration.value = duration;
	customDuration.value = '';
};

const onCustomDurationInput = (e) => {
	const value = e.detail.value;
	if (value) {
		selectedDuration.value = null;
	}
};

const bindPickerChange = (e) => {
	plateIndex.value = e.detail.value;
};

const openPaymentPopup = () => {
	paymentPopup.value.open();
};

const closePaymentPopup = () => {
	paymentPopup.value.close();
};

const handlePayment = (method) => {
  if (method === 'balance' && isBalanceInsufficient.value) {
    uni.showToast({
      title: '余额不足',
      icon: 'none'
    });
    return;
  }


  closePaymentPopup();
	uni.showLoading({ title: '支付中...' });

	setTimeout(() => {
		uni.hideLoading();
		uni.showToast({ title: '支付成功', icon: 'success' });
		// 支付成功后逻辑，例如更新余额、返回上一页
		if (method === 'balance') {
			balance.value -= totalAmount.value;
		}
		setTimeout(() => {
			uni.navigateBack();
		}, 1500);
	}, 1000);
};

const back = () => {
	uni.navigateBack();
};
</script>

<style scoped>
.container {
	padding-bottom: 140rpx; /* 为底部按钮留出空间 */
}

.card-info-section {
	padding: 20rpx 30rpx;
}

.card-item {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.monthly-card {
	background: linear-gradient(135deg, #1DCFB7, #12ada9);
}

.daily-card {
	background: linear-gradient(135deg, #2196F3, #64B5F6);
}

.card-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-info {
	display: flex;
	flex-direction: column;
}

.card-name {
	font-size: 30rpx;
	margin-bottom: 10rpx;
}

.price {
	font-size: 32rpx;
}

.price-value {
	font-size: 48rpx;
	font-weight: bold;
}

.card-type-badge {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.license-plate-section, .duration-section, .summary-section, .rules-section {
	margin: 20rpx 30rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
}

.picker {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 0;
}

.rules-content p {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 10rpx;
}

.payment-amount {
	text-align: center;
	font-size: 50rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
  color: #ff5050;

}

.payment-option {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.duration-options {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.duration-option {
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	cursor: pointer;
}

.duration-option.active {
	background-color: #1DCFB7;
	color: #fff;
	border: 1px solid #1DCFB7;
}

.duration-input {
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	flex-grow: 1;
	min-width: 150rpx;
}

.summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 30rpx;
}

.total-amount {
	font-size: 36rpx;
	font-weight: bold;
	color: #ff5050;
}

.footer-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background-color: #fff;
	border-top: 1px solid #f0f0f0;
}

.confirm-btn {
	background-color: #1DCFB7;
	color: #fff;
	border-radius: 50rpx;
}

/* Payment Popup */
.payment-popup-content {
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding: 20rpx 0;
}

.popup-header {
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	padding: 20rpx;
}

.payment-option {
	padding: 30rpx;
	text-align: center;
	font-size: 30rpx;
	border-bottom: 1px solid #f5f5f5;
}

.cancel-btn {
	padding: 30rpx;
	text-align: center;
	font-size: 30rpx;
	color: #999;
}

.payment-option.disabled {
  color: #999;
  cursor: not-allowed;
}

</style>